<template>
	<view class="vip-content">
		<scroll-view scroll-y="true" class="bg-white" :style="{ 'height': setHeight + 'px' }">
			<view class="vip-price">
				<view class="text-center text-vip">
					会员特权
				</view>
			<!-- 	<view class="">
					<image :src="`../../static/qy.svg`" mode="scaleToFill" style="width:710px;height:100px;"></image>
				</view> -->
				<u-grid :col="2" :border="false">
						<u-grid-item>
							<image src="../../static/circle-v.png" mode="scaleToFill"
								style="width:32px;height:32px;"></image>
							<view class="grid-text">无限次数查看</view>
						</u-grid-item>
						<u-grid-item>
							<image src="../../static/box-v.png" mode="scaleToFill"
								style="width:32px;height:32px;"></image>
							<view class="grid-text">3D街景地图</view>
						</u-grid-item>
						<u-grid-item>
						<image src="../../static/earth-v.png" mode="scaleToFill"
							style="width:32px;height:32px;"></image>
							<view class="grid-text">全球5万+景区</view>
						</u-grid-item>
						<u-grid-item>
						<image src="../../static/voice-v.png" mode="scaleToFill"
							style="width:32px;height:32px;"></image>
							<view class="grid-text">专业语音讲解</view>
						</u-grid-item>
					</u-grid>
				<view class="radius shadow shadow-lg bg-proudut productLists" v-for="(item,index) in prouctList" :key="index"
				 :class="prouductKey==item.Key?'active':''" @tap="changeProuct(item.Key)">
					<view class="price-item" @tap="shareWx">
						<view class="price-text share-item">
							<view class="price"><text class="share-price">￥{{item.SalePrice}}</text> <text class="share-price-sale">￥{{item.MarketPrice}}</text></view>
							<text class="share-text">{{item.Name}}</text>
						</view>
						<button class="cu-btn round shadow" :class="prouductKey==item.Key?'bg-orange':'lines-orange'">{{item.Description}}</button>
					</view>
				</view>
			</view>
			<view class="text-center margin-top">
				购买即同意<text class="xie_yi" @tap="open_doc(1)">《用户协议》</text>及<text class="xie_yi" @tap="open_doc(2)">《隐私政策》</text>
			</view>
		</scroll-view>
		<view class="pay-button bg-white">
			<image class="pay-img" mode="aspectFill" src="../../static/wxpay.png" style="width:32px;height:32px;"></image>
			<button class="cu-btn block round lg text-green wx-pay" @tap="pay">
				微信支付
			</button>
		</view>

	</view>

</template>

<script>
	import userXieYi from '@/data/userXieYi.js'
	import privacy_policy from '@/data/privacy_policy.js'
	import {
		wxpay
	} from '@/api/pay.js'
	import {
		getuser
	} from '@/api/login.js'
	import {
		getproducts
	} from '@/api/product.js'
	export default {
		data() {
			return {
				prouctList: [],
				setHeight: 0,
				prouductKey: '',
				image: 'https://api.zhenbaoxian.com/images/logo_108.png'
			};
		},
		mounted() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.setHeight = res.windowHeight - 60
				}
			})
		},
		methods: {
			// 打开用户协议
			open_doc(state) {
				if (state === 1) {
					uni.showModal({
						title: '用户协议',
						content: userXieYi,
						showCancel: false
					})
				} else if (state === 2) {
					uni.showModal({
						title: '隐私政策',
						content: privacy_policy,
						showCancel: false
					})
				}
			},
			changeProuct(e) {
				this.prouductKey = e
			},
			getuser() {
				getuser({}).then(res => {
					console.log(res.Data.data)
					uni.setStorage({
						key: 'userInfo',
						data: JSON.stringify(res.Data.data),
						success: () => {},
						fail: () => {
							console.log('写入user失败');
						}
					})
				}, err => {})
			},
			pay() {
				let that = this
				if (!that.$store.state.vuex_token) {
					that.$u.debounce(() => {
						that.$goWindow('/pages/login/login')
					}, 300)
					return
				}
				wxpay({
					productKey: this.prouductKey,
					tradeType: 'APP',
					wxOpenId: ''
				}).then(res => {
					const od = res.Data.data
					var varpay = {
						"appid": od.appId,
						"noncestr": od.nonceStr,
						"package": "Sign=WXPay",
						"partnerid": od.partnerId,
						"prepayid": od.prepayId,
						"timestamp": od.timeStamp,
						"sign": od.paySign
					}

					uni.requestPayment({
						provider: "wxpay",
						orderInfo: varpay,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							that.getuser()
							uni.navigateBack()
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});

				}, err => {
					//this.$u.toast(err.Msg);
				})
			},
			async shareWx() {

			},
		},
		onLoad() {
			getproducts().then(res => {
				this.prouctList = res.Data.data
				this.prouductKey = this.prouctList[0].Key
			}, err => {})

		},
	}
</script>

<style scoped>
	.lx-scroll {
		height: 500px;
	}

	.xie_yi {
		color: #108EE9;
	}

	.text-vip {
		margin-top: 20upx;
		color: #966C41;
		font-size: 16px;
		font-weight: bold;
	}

	.price-text {
		color: #966C41;
	}

	.pay-img {
		position: absolute;
		left: 25%;
		/* top: 40upx; */
		z-index: 99;
	}

	.wx-pay {
		width: 100%;
		font-size: 18px;
	}

	.pay-button {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		height: 60px;
		/* padding: 30upx; */
		
		display: flex;
		align-items: center;
	}

	.bg-proudut {
		background-color: #fdf6ec;
	}

	.page {
		height: 100vh;
	}

	.addPerson {
		text-align: center;
		margin-top: 50upx;
	}

	.price-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* border-top: 1px solid #f2f2f2; */
		padding: 10px;

	}

	.price-item .share-item {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.price {
		display: flex;
		align-items: center;
	}

	.share-price {
		margin-left: 20upx;
		font-size: 20px;
		font-weight: bold;

	}


	.share-price-sale {
		margin-left: 20upx;
		font-size: 20px;
		/* font-weight: bold; */
		text-decoration: line-through;
	}



	.share-text {
		margin-left: 20upx;
		font-size: 14px;
		margin-top: 20upx;
		font-weight: bold;
	}

	.productLists {
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: white; */
		margin: 30upx;
		border: 1px solid #dedcc9;

	}

	.active {
		border: 2px solid #f90;
	}



	.productLists .perListsTop {
		display: flex;
		margin: 30upx;
		line-height: 80upx;
	}


	.perListsTop .info {
		color: #555555;
		margin-left: 4%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.perListsTop .add {
		padding: 30upx;
		display: flex;

	}

	.perListsTop .name {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.vip-content {
		background-color: #f3f3f3;
	}
</style>
